<template>
  <div class="index">
    <!-- 左边内容 -->
    <div class="slideHead">
      <!-- 这个是轮播图的内容 -->
      <el-carousel :interval="3000">
        <el-carousel-item v-for="(item, index) in slideImg" :key="index">
          <div class="imgBox">
            <img :src="item.imgUrl" />
          </div>
        </el-carousel-item>
      </el-carousel>
      <!-- 轮播图内容结束 -->
      <!-- 新增和短信 -->
      <div class="content-left">
        <div class="info">
          <!-- 账户信息 -->
          <div class="account info_item">
            <div class="itemImg">
              <img src="../assets/store.png" />
              <p class="balance">
                代币剩余：
                <span>{{accountBalance}}</span>
              </p>
            </div>
            <div class="opretion">
              <el-button class="info_btn" type="primary" @click="handleToAddUser">新增商户</el-button>
            </div>
          </div>
          <div class="msgAllowance info_item">
            <div class="itemImg">
              <img src="../assets/message.png" />
              <p class="balance">
                短信余量：
                <span>{{msgMargin}}</span>
              </p>
            </div>
            <div class="opretion">
              <el-button class="info_btn" type="primary" @click="handleToMsgAllowance">短信充值</el-button>
            </div>
          </div>
        </div>
        <!-- 这个是订单流水 -->
        <div class="infoOrder">
          <div class="order_item">
            <div class="order_title">
              <span>今日新增商户</span>
              <i @click="handleToUser">
                查看更多
                <i class="icongengduo"></i>
              </i>
            </div>
            <div class="info_data">
              <span class="number">
                <span class="bolds">{{infoOrderData.u_todaytotal}}</span>个
              </span>
            </div>
            <div class="yesterday">
              昨日新增商户：
              <span>{{infoOrderData.u_yesterday_total}}</span>个
              <!-- 对比订单增幅 -->
              <i
                v-if="infoOrderData.u_todaytotal>infoOrderData.u_yesterday_total"
                class="iconjiantouarrow499"
                style="color: #F56C6C"
              ></i>
              <i
                v-else-if="infoOrderData.u_todaytotal<infoOrderData.u_yesterday_total"
                class="iconjiantouarrow505"
                style="color: #67C23A"
              ></i>
            </div>
          </div>
          <div class="order_item">
            <div class="order_title">
              <span>今日软件订单</span>
              <i @click="handleToSoftware">
                查看更多
                <i class="icongengduo"></i>
              </i>
            </div>
            <div class="info_data">
              <span class="number">
                <span class="bolds">{{infoOrderData.d_todaytotal}}</span>个
              </span>
            </div>
            <div class="yesterday">
              昨日软件订单：
              <span>{{infoOrderData.d_yesterday_total}}</span>个
              <!-- 对比订单增幅 -->
              <i
                v-if="infoOrderData.d_todaytotal>infoOrderData.d_yesterday_total"
                class="iconjiantouarrow499"
                style="color: #F56C6C"
              ></i>
              <i
                v-else-if="infoOrderData.d_todaytotal<infoOrderData.d_yesterday_total"
                class="iconjiantouarrow505"
                style="color: #67C23A"
              ></i>
            </div>
          </div>
          <div class="order_item">
            <div class="order_title">
              <span>今日短信订单</span>
              <i @click="handleToNote">
                查看更多
                <i class="icongengduo"></i>
              </i>
            </div>
            <div class="info_data">
              <span class="number">
                <span class="bolds">{{infoOrderData.s_todaytotal}}</span>个
              </span>
            </div>
            <div class="yesterday">
              昨日短信订单：
              <span>{{infoOrderData.s_yesterday_total}}</span>个
              <!-- 对比订单增幅 -->
              <i
                v-if="infoOrderData.s_todaytotal>infoOrderData.s_yesterday_total"
                class="iconjiantouarrow499"
                style="color: #F56C6C"
              ></i>
              <i
                v-else-if="infoOrderData.s_todaytotal<infoOrderData.s_yesterday_total"
                class="iconjiantouarrow505"
                style="color: #67C23A"
              ></i>
            </div>
          </div>
          <div class="order_item">
            <div class="order_title">
              <span>今日增值订单</span>
              <i @click="handleToAppreciation">
                查看更多
                <i class="icongengduo"></i>
              </i>
            </div>
            <div class="info_data">
              <span class="number">
                <span class="bolds">{{infoOrderData.v_todaytotal}}</span>个
              </span>
            </div>
            <div class="yesterday">
              昨日增值订单：
              <span>{{infoOrderData.v_yesterday_total}}</span>个
              <!-- 对比订单增幅 -->
              <i
                v-if="infoOrderData.v_todaytotal>infoOrderData.v_yesterday_total"
                class="iconjiantouarrow499"
                style="color: #F56C6C"
              ></i>
              <i
                v-else-if="infoOrderData.v_todaytotal<infoOrderData.v_yesterday_total"
                class="iconjiantouarrow505"
                style="color: #67C23A"
              ></i>
            </div>
          </div>
        </div>
        <!-- 订单流水的内容结束 -->
      </div>
    </div>
    <!-- 右边内容 -->
    <div class="content">
      <!-- 系统公告内容 -->
      <div class="notice">
        <div class="notice_title">
          系统公告
          <span class="toMore" @click="handleToProblem">
            查看更多
            <i style="font-size: 14px" class="icongengduo"></i>
          </span>
        </div>
        <div class="notice_content" @click="handleToProblem">
          <ul>
            <li v-for="(item, index) in systemNotice" :key="index">
              <div class="systemTitle">{{item.sv_message_title}}</div>
              <div class="systemTitle" style="margin-bottom: 10px">{{item.sv_creation_date}}</div>
              <div class="systemContent" v-html="item.sv_message_content"></div>
            </li>
          </ul>
        </div>
        <div class="notice_disk"></div>
      </div>
      <div class="content-right">
        <!-- 近期反馈 -->
        <div class="pastDue" :style="{display: userId == 1 ? 'flex' : 'none'}">
          <div class="pastDue_title">近期反馈</div>
          <ul class="pastDue_content" @click="handleToFeedback">
            <li class="feedbackList" v-for="(item, index) in feedbackData" :key="index">
              <div class="feedback_content">{{item.content}}</div>
              <div class="creationdate">{{item.time}}</div>
            </li>
          </ul>
        </div>
        <div class="pastDue">
          <div class="pastDue_title">更新内容</div>
          <ul class="pastDue_content update">
            <li>
              <div class="pastDue_time">2020-02-28</div>
              <div class="pastDue_list">
                <p>新增创建小程序</p>
                <p>新增提交支付资料</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-02-26</div>
              <div class="pastDue_list">
                <p>新增需求功能模块</p>
                <p>新增MINI版本</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-02-26</div>
              <div class="pastDue_list">
                <p>新增需求功能模块</p>
                <p>新增MINI版本</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-02-18</div>
              <div class="pastDue_list">
                <p>允许来自手机官网的用户修改推荐人</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-01-15</div>
              <div class="pastDue_list">
                <p>支付申请资料新增支行信息</p>
                <p>支付申请资料图片样式优化</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-01-10</div>
              <div class="pastDue_list">
                <p>优化误导高级续费的问题</p>
                <p>结算明细新增按销售类型筛选</p>
                <p>处理服务模式开启无效的问题</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-01-07</div>
              <div class="pastDue_list">
                <p>支付申请增加资料下载</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-01-06</div>
              <div class="pastDue_list">
                <p>开放原高级版直接续费为现高级版</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2020-01-03</div>
              <div class="pastDue_list">
                <p>处理支付配置的问题</p>
                <p>高级连锁版本整合</p>
                <p>处理新增免费版计数器</p>
                <p>优化商户列表的筛选</p>
                <p>优化新增页面的样式</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-12-20</div>
              <div class="pastDue_list">
                <p>新增连锁版本角标</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-12-11</div>
              <div class="pastDue_list">
                <p>规范了一些文字的表达</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-12-06</div>
              <div class="pastDue_list">
                <p>优化增值页面样式</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-12-03</div>
              <div class="pastDue_list">
                <p>处理购买操作员代币显示错误的问题</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-28</div>
              <div class="pastDue_list">
                <p>下架聚合外卖增值服务</p>
                <p>处理增值接口传值错误</p>
                <p>限制分店购买操作员</p>
                <p>操作日志详细内容优化</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-23</div>
              <div class="pastDue_list">
                <p>增值服务页面以及购买优化</p>
                <p>对登录以及多个页面进行加载优化</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-19</div>
              <div class="pastDue_list">
                <p>更新子账号手机号码验证</p>
                <p>更新登录账号验证</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-18</div>
              <div class="pastDue_list">
                <p>推荐人修改权限更改为空时可修改</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-13</div>
              <div class="pastDue_list">
                <p>处理升级版本套餐重名导致的bug</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-08</div>
              <div class="pastDue_list">
                <p>连锁店铺升级下拉框新增搜索</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-07</div>
              <div class="pastDue_list">
                <p>一些页面优化</p>
                <p>开放0开头号码注册及修改</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-06</div>
              <div class="pastDue_list">
                <p>新增商户客服/经理改为选择子用户</p>
                <p>修改推荐人客服/经理限制主账号修改</p>
                <p>操作日志新增定位修改详细内容</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-11-04</div>
              <div class="pastDue_list">
                <p>新增商户添加未选软件版本提示</p>
                <p>新增翼支付通道</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-10-17</div>
              <div class="pastDue_list">
                <p>结算明细新增订单回收功能</p>
                <p>修复菜单栏点击我的商户一闪的问题</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-10-09</div>
              <div class="pastDue_list">
                <p>新增待办事项支付资料内容</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-09-27</div>
              <div class="pastDue_list">
                <p>处理新增至尊版数据错误的问题</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-09-06</div>
              <div class="pastDue_list">
                <p>支付配置新增未开启提示</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-09-05</div>
              <div class="pastDue_list">
                <p>处理子账号点击操作日志无法返回的问题</p>
              </div>
            </li>
            <li>
              <div class="pastDue_time">2019-08-13</div>
              <div class="pastDue_list">
                <p>推出套餐包升级</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      // 轮播图
      slideImg: [
        {
          imgUrl: require("../assets/slide02.jpg")
        },
        {
          imgUrl: require("../assets/slide01.jpg")
        }
      ],
      // 系统公告
      systemNotice: {},
      // 订单类的内容数据
      infoOrderData: [],
      // 近期反馈内容
      feedbackData: [],
      // 身份令牌
      myToken: ""
    };
  },
  computed: {
    // 短信余量
    ...mapState(["msgMargin"]),
    ...mapState(["accountBalance"]),
    ...mapState(["usertype"]),
    ...mapState(["userId"])
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      // 时间格式化
      this.timeFormatting = this.utils.timeFormatting();
      // 获取公告
      this.$api.getNoticeList(1).then(res => {
        this.systemNotice = res.map(v => {
          v.sv_creation_date = new Date(v.sv_creation_date).Format(
            "yyyy-MM-dd hh:mm:ss"
          );
          return {
            ...v
          };
        });
      });
      // 获取流水订单信息
      this.$api.getOrderUpsAndDowns(this.myToken).then(res => {
        const { succeed, values } = res;
        if (succeed) {
          this.infoOrderData = values;
        }
      });
      // 获取近期反馈
      this.$api.getFeedbackList(1, 5, this.myToken).then(res => {
        if (res.values) {
          const { dataList } = res.values;
          this.feedbackData = dataList.map(v => {
            v.creationdate = new Date(v.creationdate).Format("yyyy-MM-dd");
            return {
              content: v.userfeedback_content,
              time: v.creationdate
            };
          });
        }
      });
    },
    // 跳转到新增商户
    handleToAddUser() {
      if (this.usertype == 1) {
        this.$message({
          type: "warning",
          message: "您没有操作权限!"
        });
        return;
      }
      this.$router.push("merchant/addUser");
    },
    // 跳转到短信充值
    handleToMsgAllowance() {
      if (this.usertype == 1) {
        this.$message({
          type: "warning",
          message: "您没有操作权限!"
        });
        return;
      }
      this.$router.push("account/msgRecharge");
    },
    // 跳转到系统公告
    handleToProblem() {
      const activeName = "commonality";
      this.$router.push({
        path: "/admin/help/problem",
        query: {
          activeName
        }
      });
    },
    // 跳转到反馈列表
    handleToFeedback() {
      this.$router.push({
        path: "/admin/help/feedback"
      });
    },
    // 跳转到商户列表
    handleToUser() {
      if (this.usertype == 1) {
        this.$message({
          type: "warning",
          message: "您没有操作权限!"
        });
        return;
      }
      this.$router.push("/admin/merchant/myMerchant");
    },
    // 跳转到软件订单
    handleToSoftware() {
      if (this.usertype == 1) {
        this.$message({
          type: "warning",
          message: "您没有操作权限!"
        });
        return;
      }
      this.$router.push("/admin/order/versionsOrder");
    },
    // 跳转到短信订单
    handleToNote() {
      if (this.usertype == 1) {
        this.$message({
          type: "warning",
          message: "您没有操作权限!"
        });
        return;
      }
      this.$router.push("/admin/order/msgOrder");
    },
    // 跳转到增值订单
    handleToAppreciation() {
      if (this.usertype == 1) {
        this.$message({
          type: "warning",
          message: "您没有操作权限!"
        });
        return;
      }
      this.$router.push("/admin/order/appreciationOrder");
    },
    // 切换标签页
    toggleTabs() {
      this.activeName = "hardware";
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.index {
  display: flex;
  // 左边内容
  .slideHead {
    flex: 4;
    margin-right: 20px;
    // 轮播图
    .el-carousel {
      background-color: #fff;
      box-shadow: 2px 2px 10px 0 #ddd;
    }
    // 流水
    .content-left {
      display: flex;
      justify-content: space-between;
      // 商户和短信
      .info {
        width: 32.5%;
        display: flex;
        flex-direction: column;
        .info_item {
          display: flex;
          background-color: #fff;
          margin-top: 30px;
          height: 200px;
          box-shadow: 2px 2px 10px 0 #ddd;
          .itemImg {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
              height: 60%;
            }
          }
          .balance {
            margin-top: 10px;
          }
          .opretion {
            flex: 1;
            display: flex;
            align-items: center;
          }
        }
      }
      // 订单信息
      .infoOrder {
        width: 65%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .order_item {
          width: 43.5%;
          padding: 20px;
          background-color: #fff;
          margin-top: 30px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          box-shadow: 2px 2px 10px 0 #ddd;
          .order_title {
            font-size: 15px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            i {
              color: #0094ff;
              font-size: 14px;
              font-style: normal;
              font-weight: 100;
              cursor: pointer;
            }
          }
          .info_data {
            display: flex;
            justify-content: space-evenly;
            font-size: 14px;
            .bolds {
              font-size: 30px;
              margin-right: 10px;
              color: #777;
            }
          }
        }
      }
    }
  }
  .content {
    flex: 1;
    // 公告
    .notice {
      background-color: #fff;
      padding: 20px;
      padding-top: 0;
      height: 350px;
      box-sizing: border-box;
      margin-bottom: 30px;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-wrap: wrap;
      box-shadow: 2px 2px 10px 0 #ddd;
      &::-webkit-scrollbar {
        display: none;
      }
      .notice_title {
        font-weight: 600;
        background-color: #fff;
        line-height: 40px;
        width: 100%;
        border-bottom: 1px solid #eee;
        .toMore {
          font-size: 14px;
          color: #0094ff;
          float: right;
          cursor: pointer;
          font-weight: normal;
        }
      }
      .notice_content {
        top: 20px;
        position: absolute;
        cursor: pointer;
        ul {
          padding-left: 0;
          padding: 0 20px;
          li {
            .systemTitle {
              font-size: 14px;
              color: red;
            }
            .systemContent {
              font-size: 14px;
            }
          }
        }
      }
      .notice_disk {
        position: absolute;
        height: 20px;
        bottom: 0;
        background-color: #fff;
        z-index: 1;
        width: 100%;
      }
    }
    // 消息提醒
    .content-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 460px;
      .pastDue {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        margin-bottom: 30px;
        flex: 1;
        height: inherit;
        box-shadow: 2px 2px 10px 0 #ddd;
        .pastDue_title {
          flex: 1;
          font-size: 15px;
          font-weight: 600;
          margin: 0 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
        }
        .pastDue_content {
          flex: 16;
          font-size: 14px;
          &.update {
            overflow-y: scroll;
          }
          li {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
            .pastDue_list {
              width: 100%;
              text-indent: 20px;
            }
            .pastDue_time {
              color: red;
            }
            > p {
              display: flex;
              font-size: 15px;
              span {
                flex: 1;
              }
            }
            > p:nth-of-type(1) {
              border-bottom: 1px solid #ddd;
            }
          }
        }
        ul.pastDue_content {
          padding-left: 10px;
          cursor: pointer;
          .feedbackList {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            margin-bottom: 10px;
            .feedback_content {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 200px;
            }
          }
        }
      }
    }
  }
  // 轮播图图片内容高度
  .slideHead @{deep} .el-carousel__container {
    height: 350px;
  }
}
</style>